<template>
    <div class="list-container">
      <div v-for="item in items" :key="item.id" class="item">{{ item.text }}</div>
      <div v-if="loading">Loading...</div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        items: [], // 用于存放已加载的 item
        loading: false, // 控制是否展示 loading
        page: 1, // 当前页数
        pageSize: 5, // 每页数量
        threshold: 100, // 距离底部多少像素时触发加载
        throttleHandleScroll: null
      };
    },
    mounted() {
      this.loadMore(); // 首次加载数据
      this.throttleHandleScroll = this.throttle(this.handleScroll, 1000)
     document.querySelector(".list-container").addEventListener("scroll",  this.throttleHandleScroll); // 绑定滚动事件
    },
    beforeDestroy() {
        document.querySelector(".list-container").removeEventListener("scroll",  this.throttleHandleScroll); // 解绑滚动事件
    },
    methods: {
      loadMore() {
        this.loading = true; // 开启 loading 状态
        // 模拟异步加载数据
        setTimeout(() => {
          for (let i = 0; i < this.pageSize; i++) {
            this.items.push({
              id: this.items.length + 1,
              text: `Item ${this.items.length + 1}`,
            });
          }
          this.loading = false; // 关闭 loading 状态
          this.page++;
        }, 1000);
      },
      handleScroll() {
        const scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop; // 获取当前滚动位置
        const windowHeight = window.innerHeight; // 获取视口高度
        const scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight; // 获取文档总高度
        if (scrollHeight - (scrollTop + windowHeight) < this.threshold) {
          // 判断是否已滚动到底部
          this.loadMore(); // 触发加载更多
        }
      },
      throttle(fn, delay) {
        let timer = null;
        return function () {
          clearTimeout(timer);
          timer = setTimeout(fn, delay);
        };
      },
    },
  };
  </script>
  <style lang="less" scoped>
  .list-container {
    height: 600px;
    overflow: hidden;
    overflow-y: auto;
  }
  .item {
    height: 200px;
    border: 1px solid #ccc;
  }
  </style>

